<template>
	<view>
		<view class="bala">
			<view class="bala-he">
				<view class="dis">
					<view>学习总时长：{{recordinfo.minutes||''}}分钟</view>

				</view>
				<view class="bi">
					<view>学习课程总数量：{{recordinfo.curriculumNum||'0'}}个</view>

				</view>
			</view>
			<view>
				<view class="dis cour" v-for="(item,index) in recordinfo.tcurriculumDurationList" :key="index"
					@click="$mHelper.to('/pages/term/course/course?id='+item.tcurriculum.id)">
					<view class="cour-left">
						<image :src="item.tcurriculum.imgName"></image>
					</view>
					<view class="cour-right u-flex-1">
						<view class="clamp cour-biao">{{item.tcurriculum.name||''}}</view>
						<view class="dis  cour-bot" v-if="item.tcurriculum.durations=='100%'">
							<view class="cour-btn ">学习进度：未完成</view>
							<view class="cour-ju" style="border-radius: 8rpx;">继续学习</view>
						</view>
						<view class="dis  cour-bot" v-else>
							<view class="cour-btn " style="background: #F5F5F5;color: #999999;">学习进度：已完成</view>
							<view class="cour-ju" style="border-radius: 8rpx;">查看成绩</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		
		
		
		<!-- <view style="width: 100%;height: 30rpx; margin-top: 20rpx; background-color: #F4F4F4;"></view> -->
		<view class="padding30rpx" v-if="false">
			<view class="term-to">
				<text style="font-size: 34rpx;">企业排名前五</text>
			</view>
			<view class="dis line" style="margin-top: 20rpx;padding-bottom: 20rpx;" v-for="(item,index) in list"
				:key="index">
				<image class="record-img" :src="item.img"></image>
				<view class="flexcv dis align-items" style="width: 82%;">
					<view>
						<view style="font-size: 32rpx;">{{item.name}}</view>
						<view class="hui66" style="font-size: 24rpx;margin-top: 10rpx;">岗位：{{item.type}}</view>
					</view>
					<view class="hui66lv">
						<view>
							学习时长
						</view>
						<view style="margin-top: 10rpx;">{{item.statime}}分钟</view>
					</view>
				</view>
			</view>
			<view class="record-lv ">
				您未上榜，继续加油！
			</view>
			<view class="dis record-bot" style="margin-top: 20rpx;padding-bottom: 20rpx;">
				<!-- <image class="record-img" :src="record.headimg"></image> -->
				<u-avatar :src="record.headimg"></u-avatar>
				<view class="flexcv dis align-items" style="width: 82%;">
					<view>
						<view style="font-size: 32rpx;">{{record.likename}}</view>
						<view class="hui66" style="font-size: 24rpx;margin-top: 10rpx;">岗位：{{record.type || ''}}</view>
					</view>
					<view class="hui66lv">
						<view>
							在平台排名第{{record.wu || 0}}名
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				record: {
					time: '200',
					sub: 10,
					name: '钱袋子',
					type: '产品',
					wu: 5,
					img: 'https://pic4.zhimg.com/80/v2-594a93578b59c82dffab17febb232e4f_720w.jpg'
				},
				list: [{
						name: 'ねこ様',
						statime: '10000',
						type: '产品',
						img: 'https://pic3.zhimg.com/80/v2-0975f76ff6f2b9f62c38e74693d512ba_720w.jpg'
					},
					{
						name: '茹菓',
						statime: '10000',
						type: '运营',
						img: 'https://pic2.zhimg.com/80/v2-d182ea9485262c90149201270cafb58d_720w.jpg'
					},
					{
						name: '梦之曦',
						statime: '10000',
						type: '采购',
						img: 'https://pic1.zhimg.com/80/v2-482aa2a089347aa473ef8369dccac9e0_720w.jpg'
					},
					{
						name: '夏天',
						statime: '10000',
						type: '产品',
						img: 'https://pic2.zhimg.com/80/v2-c9259ea6c3ba69d2d303cafbce5428e9_720w.jpg'
					},
					{
						name: '钱袋子',
						statime: '10000',
						type: '产品',
						img: 'https://pic1.zhimg.com/80/v2-3a2daeebe0440430df2ba8c160cce580_720w.jpg'
					}
				],
				data: [{
						img: 'https://pic2.zhimg.com/80/v2-dc3aed71e6e4c79a7744a5aa1c0f6469_720w.jpg',
						money: '30%',
						status: 0,
						tit: '美华裔医护人员感染新冠，病情严重多症状并发，说一...'
					},
					{
						img: 'https://pic4.zhimg.com/80/v2-b7813b90c496cc6d3f0240b5546da89b_720w.jpg',
						money: '30%',
						status: 1,
						tit: '深圳六旬老汉不配合检疫检查还咬伤警察，获刑9个月...'
					},
					{
						img: 'https://pic3.zhimg.com/80/v2-f9c7b78c0ab9ad42e93cb6dcbb9c559e_720w.jpg',
						money: '30%',
						status: 2,
						tit: '丈夫从火葬场捡回家一只手，妻子看见直接被吓晕'
					},
					{
						img: 'https://pic3.zhimg.com/80/v2-f9c7b78c0ab9ad42e93cb6dcbb9c559e_720w.jpg',
						money: '30%',
						status: 2,
						tit: '丈夫从火葬场捡回家一只手，妻子看见直接被吓晕'
					},
				],
				recordinfo: []
			}
		},
		onLoad() {
			this.record = uni.getStorageSync('user')
			console.log('this.record', this.record)
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$http.get('app/UserController/selectStudyAll').then(res => {
					if (res.code == 200) {
						this.recordinfo = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record-bot {
		border-top: 1rpx solid #DDDDDD;
		padding-top: 20rpx;
		// margin-bottom: 30rpx;
	}

	.record-lv {
		color: #4CACD4;
		font-size: 24rpx;
		text-align: center;
		margin: 40rpx 0;
	}

	.record-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.term-to {
		font-size: 28rpx;
		color: #FFFFFF;
		background-color: #15aaa2;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		line-height: 48rpx;
		height: 48rpx;
		padding: 0 20rpx;

	}

	.bala-flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.bala_lv {
			background-color: #00A29A;
			color: #FFFFFF;
		}
	}

	.bala_lv {
		background-color: #00A29A;
		color: #FFFFFF;
	}

	.bala-ge {
		width: 23%;
		margin-bottom: 20rpx;
		background-color: #EFEFEF;
		padding: 30rpx;
		border-radius: 18rpx;
		text-align: center;

		.a {
			font-size: 32rpx;
			margin-bottom: 25rpx;
		}

		label {
			font-size: 28rpx;
		}
	}

	.wenzi {
		font-size: 34rpx;
		color: #333333;
		margin: 40rpx 0;
		font-weight: 500;
	}

	.bala {
		padding: 30rpx;

		.bala-he {
			background: #00A29A;
			padding: 30rpx;
			border-radius: 10rpx;
			color: #FFFFFF;

			.bala-money {
				font-size: 48rpx;
				color: #FFFFFF;
			}

			.bala-dui {
				width: 172rpx;
				height: 48rpx;
				line-height: 48rpx;
				color: #00A29A;
				background: #FFFFFF;
				border-radius: 8rpx;
				text-align: center;
			}

			.bi {
				margin-top: 30rpx;
				align-items: center;
			}
		}

	}

	.cour {
		margin-top: 25rpx;
		position: relative;

		.cour-left {
			width: 180rpx;
			height: 180rpx;
			margin-right: 25rpx;

			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}
		}

		.cour-biao {
			font-size: 30rpx;
			color: #333333;
		}

		.cour-bot {
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;
			width: 70%;

			.cour-ju {
				background: #00A29A;
				width: 170rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				color: #ffffff;
				font-size: 28rpx;
				position: absolute;
				right: 0;
			}

			.cour-btn {
				border-top-left-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
				padding: 0 20rpx;
				height: 48rpx;
				line-height: 48rpx;
				color: #00A29A;
				background-color: #D9F6FF;

			}
		}
	}
</style>
